<template>
 <div>
  <input type="text" placeholder="请输入要搜索的关键字" v-if="flag" ref='input'>
  <button v-else @click="touch">点击搜索</button>
 </div>
</template>

<script>


export default {
  data(){
    return {
      flag:false,
    }
  },
  methods:{
    touch(){
      this.flag = true;

      // 聚焦input框  focus（）input聚焦方法
      // dom元素更新为异步 需要加上@nextTick
      
      this.$nextTick(()=>{
        this.$refs.input.focus()
      })
    }
  },
}
</script>

<style scoped>

</style>
